<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
    <link rel="stylesheet" href="../../../layui/css/layui.css">
    <script src="../../../layui/layui.js"></script>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="../../../css/bootstrap.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="../../../js/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="../../../js/bootstrap.min.js"></script>
</head>

<body>
<div style="padding:0px; margin:0px;">
 <ul class="breadcrumb" style="  margin:0px; " >
    	<li><a href="#">系统管理</a></li>
        <li>角色管理</li>
    </ul>
</div>
<div class="row alert alert-info"  style="margin:0px; padding:3px;" >
<form class="form-horizontal">
	<div class="col-sm-2">角色名称:</div>
    <div class="col-sm-3">
    	<input type="text" id="search_txt"  class="form-control input-sm"/>
    </div>
    <input type="button" id="search"  class="btn btn-danger"   value="查询"/>
    <input type="button" id="add_role"   class="btn btn-success"   value="添加" />
    </form>
</div>
<div class="row" style="padding:15px; padding-top:0px; ">
	<table id="role_tab" lay-filter="role_tab" >
    </table>
</div>


<script type="text/html" id="role_tool">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <!-- 这里同样支持 laytpl 语法，如： -->
    {{#  if(d.roleState == 1){ }}
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="check">禁用</a>
    {{#  } else { }}
        <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="check">启用</a>
    {{# } }}
</script>


<script>
    var update_role;
    var tab ;
    layui.use(['table','layer'], function() {
        var table = layui.table;
        var layer = layui.layer;

        tab = table.render({
            elem: '#role_tab'
            ,url:'AjaxRoleInfoServlet.do?method=all'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,page:true
            ,cols: [[
                {field:'roleId', width:80, title: 'ID', sort: true}
                ,{field:'roleName', width:180, title: '角色名称'}
                ,{field:'roleDesc', width:180, title: '角色描述'}
                ,{field:'roleState', width:80, title: '状态',templet:function (e) {
                        let state = e.roleState == 1 ? "正常" : "禁用";
                        let color = e.roleState == 1 ? "normal" : "danger";
                        return `<a href="#" class="layui-btn ayui-btn-${color} layui-btn-xs">${state}</a>`;
                    }}
                ,{ width:280, title: '操作',templet:"#role_tool"}

            ]]
        });

// 表格中行监听事件
        table.on('tool(role_tab)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

           if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                    $.post("AjaxRoleInfoServlet.do",{roleId:data.roleId,method:"delete"},function (e) {
                        if(e == "true"){
                            layer.msg("状态删除成功!");
                            flusTab();
                        }else{
                            layer.msg("状态删除失败!");
                        }
                    })
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something
                update_role = data;
                top.update_role = data;
               top.layer.open({
                   type:2,
                   title:"添加角色",
                   content:"view/system/roleinfo/roleinfo_update.html",
                   area :["850px","400px"]
               })
            } else if(layEvent === 'LAYTABLE_TIPS'){
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }else if(layEvent === 'check'){
               layer.msg("修改状态"+data.roleId)
               let state = data.roleState == 1 ? 0 : 1;
               $.post("AjaxRoleInfoServlet.do",{method:'state',roleId:data.roleId,state},function (e) {
                    if(e == "true"){
                        layer.msg("状态修改成功!");
                        flusTab();
                    }else{
                        layer.msg("状态修改失败!");
                    }
               });

           }
        });


        $("#add_role").click(function () {
            top.layer.open({
                type:2,
                title:"添加角色",
                content:"view/system/roleinfo/roleinfo_add.html",
                area :["850px","400px"]
            })
        })

        $("#search").click(function () {
            tab.reload({
                where:{
                    search:$("#search_txt").val()
                }
            });
        })

    })


    function flusTab() {
        tab.reload();
    }

    //给父页面添加一个属性叫flusTab
    top.flusTab = flusTab;

</script>

</body>
</html>
